@import "../base/page";
.page-page3 {

  .base-page;
  background: url(../images/page1/bg.png) no-repeat ;
  background-size: 100% 100%;

  .wrapper {
    // width: 100%;
    // height: 100%;
    // background: url(../images/page3/bgStep1.png) no-repeat;
    // background-size: cover;
    overflow: hidden;
  }
  ul, li {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .p3bg2{
    position: absolute;
    width: 100%;
    top: ~`top_p(0)`;
     left: ~`left_p(0)`;
  }
  .slide1, .slide2, .slide3 {
    width: 100%;
    height: 100%;
    float: left;
    // background: url(../images/Share/bg.png) no-repeat;
    /*background-size: cover;*/
  }
  .slide1 {
    // display: none; 
  }
  .slide2 {
  }
  .slide3 {
    //background: blue;
  }
  .slide {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 3;
    top: ~`top_p(380)`;
  }
  .chose {
    position: absolute;
    top: ~`top_p(30)`;
    width: ~`width_p(225)`;
     left: ~`left_p(290)`;
  }
  .scroll2 {
    position: absolute;
    top: ~`top_p(880)`;
    width: ~`width_p(720)`;
    height: ~`height_p(62)`;
     left: ~`left_p(-20)`;
    display:none;
    z-index: 5;
  }
  .scroll2-ul {
    position: relative;
    width: 60%;
    margin: 0 auto;
    display: none;
    // overflow-y: hidden;
    // overflow-x: scroll;
    top: ~`top_p(350)`;

  }
  .scroll2-ul::-webkit-scrollbar{
    display:none;
  }
    
  .scroll2-ul > li {
    width: ~`width_p(100)`;
    // height: 100%;
    display: inline-block;
    position: absolute;



  }
  .scroll2-ul > li:nth-child(1) {
    left: ~`left_p(-50)`;
  }
  .scroll2-ul > li:nth-child(2) {
    left: ~`left_p(60)`;
  }
  .scroll2-ul > li:nth-child(3) {
    left: ~`left_p(170)`;
  }
  .scroll2-ul > li:nth-child(4) {
    left: ~`left_p(280)`;
  }
  .scroll2-ul > li:nth-child(5) {
    left: ~`left_p(390)`;
  }
  .scroll2-ul > li:nth-child(6) {
    left: ~`left_p(500)`;
  }
  .scroll2-ul > li:nth-child(7) {
    left: ~`left_p(610)`;
  }
  .scroll2-ul > li:nth-child(8) {
    left: ~`left_p(720)`;
  }
  // .scroll2-ul > li:nth-child(8) {
  //   left: 105%;
  // }
  // .scroll2-ul > li:nth-child(9) {
  //   left: 125%;
  // }
  // .scroll2-ul > li:nth-child(10) {
  //   left: 140%;
  // }
  .colorbtn {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
  }
  .colorbtn > img {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    opacity:0.5;
  }
    //step选择颜色
    .step1Div{
      // position: absolute;
      // // background-color: orange;
      // top: ~`top_p(960)`;
      // width: ~`width_p(400)`;
      // height: ~`height_p(122)`;
      //  left: ~`left_p(155)`;
    }
    .step1Div_white{
      position: absolute;
      top: ~`top_p(1010)`;
      width: ~`width_p(75)`;
       left: ~`left_p(200)`;
       opacity: 1;
    }
    .step1Div_red{
      position: absolute;
      top: ~`top_p(1010)`;
      width: ~`width_p(75)`;
       left: ~`left_p(320)`;
       opacity: 0.5;
    }
    .step1Div_black{
      position: absolute;
      top: ~`top_p(1010)`;
      width: ~`width_p(75)`;
       left: ~`left_p(450)`;
       opacity: 0.5;
    }
    .step1BtnOk{
      position: absolute;
      top: ~`top_p(1100)`;
      width: ~`width_p(126)`;
       left: ~`left_p(300)`;
    }
    .step2BtnOk{
      position: absolute;
      display: none;
      top: ~`top_p(1120)`;
      width: ~`width_p(126)`;
       left: ~`left_p(450)`;
    }
  .step2Div{
    display: none;
    // position: absolute;
    // // background-color: blue;
    // top: ~`top_p(900)`;
    // width: ~`width_p(400)`;
    // height: ~`height_p(122)`;
    // left: ~`left_p(175)`;  
  }
  .step2Div_1{
    position: absolute;
    top: ~`top_p(1010)`;
    width: ~`width_p(96)`;
     left: ~`left_p(100)`;
    opacity: 1;
  }
  .step2Div_2{
    position: absolute;
    top: ~`top_p(1010)`;
    width: ~`width_p(96)`;
     left: ~`left_p(240)`;
     opacity:0.5;
  }
  .step2Div_3{
    position: absolute;
    top: ~`top_p(1010)`;
    width: ~`width_p(102)`;
     left: ~`left_p(370)`;
     opacity: 0.5;
  }
  .step2Div_4{
    position: absolute;
    top: ~`top_p(1010)`;
    width: ~`width_p(135)`;
     left: ~`left_p(500)`;
     opacity: 0.5;
  }

  
  // 积木样式
  .jimu  {
    width: ~`width_p(41)`;
    height: ~`width_p(25)`;
    // background: red;
    float: left;
    background-size: cover;
    // background-repeat: no-repeat;
    background-image: url('../images/page3/white_dian.png') ;
    line-height: 30px;  
  }
  .jimu1{
    width: ~`width_p(41)`;
    height: ~`width_p(25)`;
    // background: red;
    float: left;
    background-size: cover;
    line-height: 30px;  
    // background-repeat: no-repeat;
    // background-image: url('../images/page3/btn/h6.png') ;
  }
  // .line1Div{
  //   height: 5%;
  //   width: 95%;
  //   background-color: orchid;
  //   position: absolute;
  // }
  // .clear {
  //   position: absolute;
  //   top: ~`top_p(730)`;
  //   width: ~`width_p(71)`;
  //   left: ~`left_p(658)`;
  //   // display: none;
  // }
  .bg {
    background: transparent;
    margin: 0 auto;
    position: absolute;
    top: ~`top_p(-250)`;
    left: ~`left_p(100)`;
    z-index: 3;
    display: none;
  }
  .bg2 {
    background: transparent;
    margin: 0 auto;
    position: absolute;
    top: ~`top_p(-250)`;
    left: ~`left_p(100)`;
    z-index: 3;
    display: none;
  }
  .bg3 {
    background: transparent;
    margin: 0 auto;
    position: absolute;
    top: ~`top_p(-250)`;
    left: ~`left_p(100)`;
    z-index: 3;
    display: none;
  }
  .bg4 {
    background: transparent;
    margin: 0 auto;
    position: absolute;
    top: ~`top_p(-250)`;
    left: ~`left_p(100)`;
    z-index: 3;
    display: none;
  }
    .xinBorder {
    // background-color: orange;
    width: 14.28%;
    height: 16.66%;
    float: left;
  }
  .xincolor {
    background-image:url(../images/page3/btn/h5.png);
    background-size:cover;
  }
  .xinDivborder {
    width: 13%;
    height: 12%;
    z-index: 1;
    position: absolute;
    display: none
  }
  .pupAlert {
    position: absolute;
    z-index: 3;
    width: 40%;
    // height: 10%;
    background-color: green;
    text-align: center;
    display: none;
    font-size: 40%;
    top:85%;
  }
  .trueAlert {
    float: left;
    width: 50%;
  }
  .falseAlert {
    float: left;
    width: 50%;
  }
  .phone_shell {
    position: absolute;
    width: ~`width_p(655)`;
    // height:~`height_p(1500)` ;
    top: ~`top_p(60)`;
    left: ~`left_p(50)`;
  }  
  .phone_dian {
    position: absolute;
    width: ~`width_p(565)`;
    top: ~`top_p(70)`;
    left: ~`left_p(90)`;
  }  
  .step2Mobelbg{
    position: absolute;
    width: ~`width_p(565)`;
    // height:~`height_p(1500)` ;
    top: ~`top_p(80)`;
    left: ~`left_p(92)`;
    display: none;
    z-index: 10;
  }  .left {
    position: absolute;
    width: ~`width_p(73)`;
    top: ~`top_p(400)`;
    left: ~`left_p(12)`;
  }
  .right {
    position: absolute;
    width: ~`width_p(73)`;
    top: ~`top_p(400)`;
    left: ~`left_p(668)`;
  }
  .ovelay {
    display: none;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
    position: absolute;
    z-index: 6;
    top:0;
    left:0;
  }
  .input_text {
    position: absolute;
    width: ~`width_p(596)`;
    top: ~`top_p(350)`;
    left: ~`left_p(75)`;
    // display: none;
  }
  #myInput {
    position: absolute;
    width: ~`width_p(520)`;
    height: ~`height_p(264)`;
    top: ~`top_p(400)`;
    left: ~`left_p(112)`;
    background: transparent;
    // background: url('../images/page3/input.png');
    outline: none;
    border: 0;
    font-size: 34%;
    z-index: 2;
    color: #000000;
    // display: none;
  }
  .inputNumber{
    position: absolute;
    width: ~`width_p(70)`;
    top: ~`top_p(720)`;
    left: ~`left_p(555)`; 
    font-size:30%;
    color:#666;
  }
   .acrt,.acrt2 {
    position: absolute;
    width: ~`width_p(148)`;
    top: ~`top_p(700)`;
    left: ~`left_p(300)`;
  }
  .acrt2 {
    display:none;
  }
  .close {
    position: absolute;
    width: ~`width_p(47)`;
    top: ~`top_p(300)`;
    left: ~`left_p(620)`;
  }
  #myInput::-webkit-input-placeholder {
    color: #E5E5E5;
  }
  #myInput:-ms-input-placeholder {
    color: #E5E5E5;
  }
  #myInput::-moz-placeholder {
    color: #E5E5E5;
  }
  #myInput:-moz-placeholder {
    color: #E5E5E5;
  }
  .confirm {
    position: absolute;
    width: ~`width_p(148)`;
    top: ~`top_p(1035)`;
    left: ~`left_p(300)`;
  }
  .smallCircle {
    position: absolute;
    width: ~`width_p(250)`;
    height: ~`height_p(35)`;
    top: ~`top_p(790)`;
    left: ~`left_p(255)`;
  }
  .smallCircle > div {
    width: 15%;
    height: 100%;
    border-radius: 50%;
    float: left;
    margin: 0 8%;
    border: 1px solid #B5B5B5;
  }
  .cir1 {
    background: #EFFFFF;
  }
  .cir2 {
    background: #333333;
  }
  .cir3 {
    background: #F0A0B1;
  }
  .bgPhone{
    position: absolute;
    width: 123%;
    top: -15%;
    z-index: -1;
    left: -17%;
    // opacity: 0;
    display:none;
  }
  .photo-a{
    position: absolute;
    width: ~`width_p(50)`;
    top: ~`top_p(50)`;
    left: ~`left_p(670)`;
  }
  .photo-b{
    position: absolute;
    width: ~`width_p(50)`;
    top: ~`top_p(145)`;
    left: ~`left_p(670)`;
  }
  .photo-c{
    position: absolute;
    width: ~`width_p(50)`;
    top: ~`top_p(240)`;
    left: ~`left_p(670)`;
  }
  .phone_red {
    position: absolute;
    width: ~`width_p(520)`;
    top: ~`top_p(-298)`;
    left: ~`left_p(115)`;
  }
  .phone_bai {
    position: absolute;
    width: ~`width_p(520)`;
    top: ~`top_p(-298)`;
    left: ~`left_p(115)`;
  }
  .selectMobelBg{   
    width: 30%;
    position: absolute; 
  } 
  .selectMobelBg1{   
    top:5%;
    left: 15%;
    position: absolute; 
  } 
  .selectMobelBg2{  
    top:5%; 
    left: 55%;
    position: absolute; 
  } 
  .selectMobelBg3{   
    top: 45%;
    left: 30%;
    position: absolute; 
  } 
  .selectMobelColorlBg{ 
    width: 30%;
    position: absolute; 
  }
  .selectMobelColorlBg1{   
    top:5%;
    left: 15%;
    position: absolute; 
  } 
  .selectMobelColorlBg2{  
    top:5%; 
    left: 55%;
    position: absolute; 
  } 
  .selectMobelColorlBg3{   
    top: 45%;
    left: 30%;
    position: absolute; 
  } 
  .selectMobel1{ 
    width: 100%;
    height:100%;
    top:0;
    left: 0;
    position: absolute;

  }
  .selectMobelColor{
    width: 100%;
    height:100%;
    top:0;
    left: 0;
    position: absolute;
    display: none;
  } 
  .mobelBtn{
    position: absolute;
    width: 15%;
    bottom: 5%;
    left: 38%;
  }
  .mobelColorBtnPre{
    display: none;
    position: absolute;
    top: ~`top_p(1120)`;
    width: ~`width_p(126)`;
     left: ~`left_p(220)`;
  }
  .mobelColorBtnNext{
    display: none;
    position: absolute;
    width: 15%;
    bottom: 5%;
    right: 30%;
  }
  .submitSheji{
    display: none;
    position: absolute;
    top: ~`top_p(1120)`;
    width: ~`width_p(126)`;
     left: ~`left_p(450)`;
  }
  .submitPre{
    display: none;
    position: absolute;
    top: ~`top_p(1120)`;
    width: ~`width_p(126)`;
     left: ~`left_p(220)`;
  }
  .bg2 .box-11-9,
  .bg2 .box-11-10,
  .bg2 .box-12-9,
  .bg2 .box-12-10,
  .bg2 .box-12-11,
  .bg2 .box-12-12,
  .bg2 .box-12-13,
  .bg2 .box-12-14,
  .bg2 .box-13-10,
  .bg2 .box-13-11,
  .bg2 .box-13-12,
  .bg2 .box-13-13,
  .bg2 .box-13-14,
  .bg2 .box-13-15,
  .bg2 .box-13-16,
  .bg2 .box-14-9,
  .bg2 .box-14-10,
  .bg2 .box-14-11,
  .bg2 .box-14-12,
  .bg2 .box-14-13,
  .bg2 .box-14-14,
  .bg2 .box-14-15,
  .bg2 .box-14-16,
  .bg2 .box-15-9,
  .bg2 .box-15-10,
  .bg2 .box-15-11,
  .bg2 .box-15-12,
  .bg2 .box-15-13,
  .bg2 .box-15-14,
  .bg2 .box-15-15,
  .bg2 .box-17-5,
  .bg2 .box-17-6,
  .bg2 .box-17-7,
  .bg2 .box-17-8,
  .bg2 .box-17-9,
  .bg2 .box-17-10,
  .bg2 .box-18-3,
  .bg2 .box-18-5,
  .bg2 .box-18-6,
  .bg2 .box-18-7,
  .bg2 .box-18-8,
  .bg2 .box-18-9,
  .bg2 .box-18-10,
  .bg2 .box-18-16,
  .bg2 .box-19-3,
  .bg2 .box-19-7,
  .bg2 .box-19-8,
  .bg2 .box-19-9,
  .bg2 .box-19-10,
  .bg2 .box-19-16,
  .bg2 .box-20-3,
  .bg2 .box-20-9,
  .bg2 .box-20-16,
  .bg2 .box-21-3,
  .bg2 .box-21-9,
  .bg2 .box-21-16,
  .bg2 .box-22-3,
  .bg2 .box-22-9,
  .bg2 .box-22-16,
  .bg2 .box-23-3,
  .bg2 .box-23-9,
  .bg2 .box-23-16,
  .bg2 .box-24-9,
  .bg2 .box-25-9,
  .bg2 .box-26-9,
  {
    background-image: url('../images/page3/btn/h2.png');
  }
  .bg2 .box-13-8,
  .bg2 .box-13-9,
  .bg2 .box-13-9,
  .bg2 .box-14-5,
  .bg2 .box-14-6,
  .bg2 .box-14-7,
  .bg2 .box-14-8,
  .bg2 .box-15-5,
  .bg2 .box-15-6,
  .bg2 .box-15-7,
  .bg2 .box-15-8,
  .bg2 .box-15-16,
  .bg2 .box-16-5,
  .bg2 .box-16-6,
  .bg2 .box-16-7,
  .bg2 .box-16-8,
  .bg2 .box-16-13,
  .bg2 .box-16-14,
  .bg2 .box-16-15,
  .bg2 .box-16-16,
  .bg2 .box-17-4,
  .bg2 .box-17-3,
  .bg2 .box-17-11,
  .bg2 .box-17-12,
  .bg2 .box-17-13,
  .bg2 .box-17-14,
  .bg2 .box-17-15,
  .bg2 .box-17-16,
  .bg2 .box-18-11,
  .bg2 .box-18-12,
  .bg2 .box-18-13,
  .bg2 .box-18-14,
  .bg2 .box-18-15,
  .bg2 .box-19-11,
  .bg2 .box-19-12,
  .bg2 .box-19-13,
  .bg2 .box-19-14,
  .bg2 .box-19-15,
  .bg2 .box-20-10,
  .bg2 .box-20-11,
  .bg2 .box-20-12,
  .bg2 .box-20-13,
  .bg2 .box-21-10,
  .bg2 .box-21-11,
  {
    background-image: url('../images/page3/btn/h6.png');
  }

  .bg3 .box-8-15,
  .bg3 .box-8-16,
  .bg3 .box-8-17,
  .bg3 .box-9-15,
  .bg3 .box-9-16,
  .bg3 .box-9-17,
  .bg3 .box-10-14,
  .bg3 .box-10-15,
  .bg3 .box-10-16,
  .bg3 .box-16-3,
  .bg3 .box-16-4,
  .bg3 .box-16-5,
  .bg3 .box-16-6,
  .bg3 .box-16-7,
  .bg3 .box-16-8,
  .bg3 .box-16-9,
  .bg3 .box-16-10,
  .bg3 .box-16-11,
  .bg3 .box-16-12,
  .bg3 .box-16-13,
  .bg3 .box-16-14,
  .bg3 .box-17-3,
  .bg3 .box-17-4,
  .bg3 .box-17-5,
  .bg3 .box-17-6,
  .bg3 .box-17-7,
  .bg3 .box-17-8,
  .bg3 .box-17-9,
  .bg3 .box-17-10,
  .bg3 .box-17-11,
  .bg3 .box-17-12,
  .bg3 .box-17-13,
  .bg3 .box-17-14,
  .bg3 .box-18-3,
  .bg3 .box-18-4,
  .bg3 .box-18-5,
  .bg3 .box-18-12,
  .bg3 .box-18-13,
  .bg3 .box-18-14,
  .bg3 .box-19-3,
  .bg3 .box-19-4,
  .bg3 .box-19-5,
  .bg3 .box-19-12,
  .bg3 .box-19-13,
  .bg3 .box-19-14,
  .bg3 .box-20-3,
  .bg3 .box-20-4,
  .bg3 .box-20-5,
  .bg3 .box-20-12,
  .bg3 .box-20-13,
  .bg3 .box-20-14,
  .bg3 .box-11-14,
  .bg3 .box-11-15,
  .bg3 .box-11-16,
  {
    background-image: url('../images/page3/btn/h7.png');
  }

  .bg3 .box-12-13,
  .bg3 .box-12-14,
  .bg3 .box-12-15,
  .bg3 .box-13-13,
  .bg3 .box-13-14,
  .bg3 .box-13-15,
  .bg3 .box-14-4,
  .bg3 .box-14-5,
  .bg3 .box-14-6,
  .bg3 .box-14-7,
  .bg3 .box-14-8,
  .bg3 .box-14-9,
  .bg3 .box-14-10,
  .bg3 .box-14-11,
  .bg3 .box-14-12,
  .bg3 .box-14-13,
  .bg3 .box-14-14,
  .bg3 .box-15-3,
  .bg3 .box-15-4,
  .bg3 .box-15-5,
  .bg3 .box-15-6,
  .bg3 .box-15-7,
  .bg3 .box-15-8,
  .bg3 .box-15-9,
  .bg3 .box-15-10,
  .bg3 .box-15-11,
  .bg3 .box-15-12,
  .bg3 .box-15-13,
  .bg3 .box-15-14,
   {
    background-image: url('../images/page3/btn/h6.png');
  }
  .bg4 .box-9-7,
  .bg4 .box-9-8,
  .bg4 .box-9-9,
  .bg4 .box-9-10,
  .bg4 .box-9-11,
  .bg4 .box-9-12,

  .bg4 .box-10-6,
  .bg4 .box-10-7,
  .bg4 .box-10-8,
  .bg4 .box-10-9,
  .bg4 .box-10-10,
  .bg4 .box-10-11,
  .bg4 .box-10-12,
  .bg4 .box-10-13,

  .bg4 .box-11-6,
  .bg4 .box-11-7,
  .bg4 .box-11-8,
  .bg4 .box-11-9,
  .bg4 .box-11-10,
  .bg4 .box-11-11,
  .bg4 .box-11-12,
  .bg4 .box-11-13,

  .bg4 .box-12-6,
  .bg4 .box-12-7,
  .bg4 .box-12-8,
  .bg4 .box-12-9,
  .bg4 .box-12-10,
  .bg4 .box-12-11,
  .bg4 .box-12-12,
  .bg4 .box-12-13,

  .bg4 .box-13-5,
  .bg4 .box-13-6,
  .bg4 .box-13-7,
  .bg4 .box-13-8,
  .bg4 .box-13-9,
  .bg4 .box-13-10,
  .bg4 .box-13-11,
  .bg4 .box-13-12,
  .bg4 .box-13-13,
  .bg4 .box-13-14,

  .bg4 .box-14-5,
  .bg4 .box-14-6,
  .bg4 .box-14-7,
  .bg4 .box-14-8,
  .bg4 .box-14-9,
  .bg4 .box-14-10,
  .bg4 .box-14-11,
  .bg4 .box-14-12,
  .bg4 .box-14-13,
  .bg4 .box-14-14,
   {
    background-image: url('../images/page3/btn/h7.png');
  }
  .bg4 .box-15-9,
  .bg4 .box-15-10,
  .bg4 .box-16-9,
  .bg4 .box-16-10,
  .bg4 .box-17-9,
  .bg4 .box-17-10,
  .bg4 .box-18-9,
  .bg4 .box-18-10,
  .bg4 .box-19-9,
  .bg4 .box-19-10,
  .bg4 .box-20-9,
  .bg4 .box-20-10,
  .bg4 .box-21-9,
  .bg4 .box-21-10,
  .bg4 .box-21-9,
  
  .bg4 .box-22-6,
  .bg4 .box-22-7,
  .bg4 .box-22-8,
  .bg4 .box-22-9,
  .bg4 .box-22-10,
  .bg4 .box-22-11,
  .bg4 .box-22-12,
  .bg4 .box-22-13,
  {
    background-image: url('../images/page3/btn/h2.png');
  }
  .bgW {
    background-image: url('../images/page3/white_dian.png');
  }
  .bgR {
    background-image: url('../images/page3/red_dian.png');
  }
  .bgB {
    background-image: url('../images/page3/btn/h8.png');
  }
}
